<template>
  <div>
    <!-- 页面主体部分 -->
    <section class="mainbox">
      <div class="column">
        <div class="panel bar">
          <h2>柱形图-就业行业</h2>
          <div class="chart">
            <left-bar></left-bar>
          </div>
          <div class="panel-footer"></div>
        </div>
        <div class="panel line">
          <h2>折线图-人员变化</h2>
          <div class="chart">
            <left-line></left-line>
          </div>
          <div class="panel-footer"></div>
        </div>
        <div class="panel pie">
          <h2>饼形图-年龄分布</h2>
          <div class="chart">
            <left-pie></left-pie>
          </div>
          <div class="panel-footer"></div>
        </div>
      </div>
      <div class="column">
        <!-- no模块制作 -->
        <div class="no">
          <div class="no-hd">
            <ul>
              <li>125811</li>
              <li>100000</li>
            </ul>
          </div>
          <div class="no-bd">
            <ul>
              <li>前端需求人数</li>
              <li>市场供应人数</li>
            </ul>
          </div>
        </div>
        <!-- 地图模块 -->
        <div class="map">
          <div class="map1"></div>
          <div class="map2"></div>
          <div class="map3"></div>
          <div class="chart">
            <china-map></china-map>
          </div>
        </div>
      </div>
      <div class="column">
        <div class="panel bar2">
          <h2>柱形图-就业行业</h2>
          <div class="chart">
            <rightbar></rightbar>
          </div>
          <div class="panel-footer"></div>
        </div>
        <div class="panel line2">
          <h2>折线图-播放量</h2>
          <div class="chart">
            <right-line></right-line>
          </div>
          <div class="panel-footer"></div>
        </div>
        <div class="panel pie2">
          <h2>饼形图-地区分布</h2>
          <div class="chart">
            <right-pie></right-pie>
          </div>
          <div class="panel-footer"></div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import ChinaMap from "./chart/ChinaMap.vue";
import LeftBar from "./chart/LeftBar.vue";
import LeftLine from "./chart/LeftLine.vue";
import LeftPie from "./chart/LeftPie.vue";
import Rightbar from "./chart/RightBar.vue";
import RightLine from "./chart/RightLine.vue";
import RightPie from "./chart/RightPie.vue";
import { mapMutations } from "vuex";
export default {
  components: {
    LeftBar,
    Rightbar,
    LeftLine,
    RightLine,
    LeftPie,
    RightPie,
    ChinaMap,
  },

  name: "ChartMinbox",

  data() {
    return {};
  },
  mounted() {
    this.send();
  },

  methods: {
    ...mapMutations({ send: "sendws" }),
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/style/utils.scss";
.mainbox {
  height: 94vh;
  display: flex;
  margin: 0 auto;
  padding: vw(10) vw(10) 0;
  .column {
    flex: 3;
  }
  .column:nth-child(2) {
    flex: 5;
    margin: 0 vw(10) vw(15);
    overflow: hidden;
  }
  .panel {
    background-color: red;
    position: relative;
    height: vh(330);
    padding: 0 vw(15) vw(40);
    border: 1px solid rgba(25, 186, 139, 0.17);
    margin-bottom: 0.1875rem;
    background: url("../assets/images/line\(1\).png") rgba(255, 255, 255, 0.03);
    &::before {
      position: absolute;
      top: 0;
      left: 0;
      width: vw(10);
      height: vh(10);
      border-left: 2px solid #02a6b5;
      border-top: 2px solid #02a6b5;
      content: "";
    }
    &::after {
      position: absolute;
      top: 0;
      right: 0;
      width: vw(10);
      height: vh(10);
      border-right: 2px solid #02a6b5;
      border-top: 2px solid #02a6b5;
      content: "";
    }
    .panel-footer {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      &::before {
        position: absolute;
        left: 0;
        bottom: 0;
        width: vw(10);
        height: vh(10);
        border-left: 2px solid #02a6b5;
        border-bottom: 2px solid #02a6b5;
        content: "";
      }
      &::after {
        position: absolute;
        bottom: 0;
        right: 0;
        width: vw(10);
        height: vh(10);
        border-right: 2px solid #02a6b5;
        border-bottom: 2px solid #02a6b5;
        content: "";
      }
    }
    h2 {
      height: vh(48);
      color: #fff;
      line-height: vh(48);
      text-align: center;
      font-size: vw(20);
      font-weight: 400;
      a {
        color: #fff;
        text-decoration: none;
        margin: 0 vw(10);
      }
    }
    .chart {
      height: vh(240);
    }
  }
}
// no数字模块
.no {
  background: rgba(101, 132, 226, 0.1);
  padding: vw(15);
  .no-hd {
    position: relative;
    border: 1px solid rgba(25, 186, 139, 0.17);
    &::before {
      position: absolute;
      top: 0;
      left: 0;
      content: "";
      width: vw(30);
      height: vh(10);
      border-top: 2px solid #02a6b5;
      border-left: 2px solid #02a6b5;
    }
    &::after {
      position: absolute;
      bottom: 0;
      right: 0;
      content: "";
      width: vw(30);
      height: vh(10);
      border-right: 2px solid #02a6b5;
      border-bottom: 2px solid #02a6b5;
    }
    ul {
      display: flex;
      li {
        position: relative;
        flex: 1;
        line-height: vh(80);
        font-size: vw(70);
        color: #ffeb7b;
        text-align: center;
        font-family: "electronicFont";
        &::after {
          content: "";
          position: absolute;
          top: 25%;
          right: 0;
          height: 50%;
          width: 1px;
          background: rgba(255, 255, 255, 0.2);
        }
      }
    }
  }
  .no-bd {
    ul {
      display: flex;
      li {
        flex: 1;
        text-align: center;
        color: rgba(255, 255, 255, 0.7);
        font-size: vw(18);
        height: vh(40);
        line-height: vh(40);
        padding-top: vw(10);
      }
    }
  }
}
.map {
  position: relative;
  height: vh(810);
  .map1 {
    width: vw(518);
    height: vh(518);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url("../assets/images/map.png");
    background-size: 100% 100%;
    opacity: 0.3;
  }
  .map2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: vw(634);
    height: vh(634);
    background: url("../assets/images/lbx.png");
    animation: rotate 15s linear infinite;
    opacity: 0.6;
    background-size: 100% 100%;
  }

  .map3 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: vw(566);
    height: vh(566);
    background: url("../assets/images/jt.png");
    animation: rotate 10s linear infinite;
    opacity: 0.6;
    background-size: 100% 100%;
  }
  .chart {
    position: absolute;
    top: 0;
    left: 0;
    // background-color: pink;
    width: 100%;
    height:vh(810);
  }
 }
</style>